[#ftl]<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="${base}/ccms/css/base.css">
<link rel="stylesheet" href="${base}/commonjs/ztree/demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="${base}/ccms/css/backstage.css" type="text/css">
<link rel="stylesheet" href="${base}/commonjs/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${base}/commonjs/jquery1.7.2/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${base}/commonjs/ztree/jquery.ztree.core-3.2.min.js"></script>
<script type="text/javascript" src="${base}/commonjs/ztree/jquery.ztree.exedit-3.2.min.js"></script>
<script type="text/javascript" src="${base}/commonjs/jquery-forms.js"></script>
<script type="text/javascript" src="${base}/commonjs/jquery.select.js"></script>
<script type="text/javascript" src="${base}/commonjs/artDialog4/artDialog.source.js?skin=blue"></script>
<script type="text/javascript" src="${base}/commonjs/artDialog4/plugins/iframeTools.source.js"></script>
  <title>网站管理后台</title>
  <style type="text/css">
   * { margin:0; padding:0; list-style:none;}
   html { height:100%; overflow:hidden; background:#f3f4f8;}
   body { height:100%; overflow:hidden; background:#f3f4f8;}
   div { line-height:1.6;}
   .top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
   .side { position:absolute; left:10px; top:90px; bottom:90px; width:260px; overflow:auto;}
   .main { position:absolute; left:260px; top:90px; bottom:90px; right:10px; overflow:auto;}
   .bottom { position:absolute; left:0px; bottom:0px; right:0px;}
   .main iframe { width:100%; height:95%;}
   /*---ie6---*/
   html { *padding:70px 10px;}
   .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
   .side { *height:100%; *float:left; *width:260px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
   .main { *height:100%; *margin-left:260px; _margin-left:257px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
   .bottom { *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
  </style>
<style type="text/css">
ul.ztree {
    margin-top: 10px;
    width:230px;
    height:90%;
    overflow-y:scroll;
    overflow-x:auto;
}
</style>
<script type="text/javascript">
<!--
$(function(){
var setting = {
    edit: {
        drag: {
            autoExpandTrigger: true,
            prev: canDropPrev,
            inner: canDropInner,
            next: canDropNext
        },
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeDrag: beforeDrag,
        beforeDrop: beforeDrop,
        beforeDragOpen: beforeDragOpen,
        onDrag: onDrag,
        onDrop: onDrop,
        onExpand: onExpand,
        onClick: onMenuItemClick
    }
};
function canDropPrev(treeId, nodes, targetNode) {
    var pNode = targetNode.getParentNode();
    if (pNode && pNode.dropInner === false) {
        return false;
    } else {
        for (var i=0,l=curDragNodes.length; i<l; i++) {
            var curPNode = curDragNodes[i].getParentNode();
            if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                return false;
            }
        }
    }
    return true;
}
function canDropInner(treeId, nodes, targetNode) {
    if (targetNode && targetNode.dropInner === false) {
        return false;
    } else {
        for (var i=0,l=curDragNodes.length; i<l; i++) {
            if (!targetNode && curDragNodes[i].dropRoot === false) {
                return false;
            } else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
                return false;
            }
        }
    }
    return true;
}
function canDropNext(treeId, nodes, targetNode) {
    var pNode = targetNode.getParentNode();
    if (pNode && pNode.dropInner === false) {
        return false;
    } else {
        for (var i=0,l=curDragNodes.length; i<l; i++) {
            var curPNode = curDragNodes[i].getParentNode();
            if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                return false;
            }
        }
    }
    return true;
}

var log, className = "dark", curDragNodes, autoExpandNode;
function beforeDrag(treeId, treeNodes) {
    className = (className === "dark" ? "":"dark");
    for (var i=0,l=treeNodes.length; i<l; i++) {
        if (treeNodes[i].drag === false) {
            curDragNodes = null;
            return false;
        } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
            curDragNodes = null;
            return false;
        }
    }
    curDragNodes = treeNodes;
    return true;
}
function beforeDragOpen(treeId, treeNode) {
    autoExpandNode = treeNode;
    return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
    className = (className === "dark" ? "":"dark");
    return true;
}
function onDrag(event, treeId, treeNodes) {
    className = (className === "dark" ? "":"dark");
    draggingNode = treeNodes[0];
    draggingParent = draggingNode.getParentNode();
    draggingPrev = draggingNode.getPreNode();
    draggingNext = draggingNode.getNextNode();
}
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
    className = (className === "dark" ? "":"dark");
    dropConfirm(treeNodes, targetNode, moveType);
}
function onExpand(event, treeId, treeNode) {
    if (treeNode === autoExpandNode) {
        className = (className === "dark" ? "":"dark");
    }
}

    //var zNodes = [];
    var data = [[#list _channels as ch][${ch.id}, "${ch.name}[${ch.id}]", ${ch.type}, "${ch.path}", ${(ch.parent.id)!0}, ${ch.sequence}, "${(ch.backgroundURI)!}"],
    [/#list]];
    var menus = [];
        ///////////////////////////////////////////////////////////////////////////////
        // id, name, parent, entry                                                   //
        // {                                                                         //
        //    page: $ {pageNo},                                                      //
        //    total: $ {totalCount},                                                 //
        //    rows: [{                                                               //
        //      id: $ {id},                                                          //
        //      cell:[id, name, description, pId, pName, cId, cName, entry, seq]     //
        //    },...                                                                  //
        //    ]                                                                      //
        //  }                                                                        //
        //  { id:33, pId:3, name:"随意拖拽 3-3"}                                      //
        ///////////////////////////////////////////////////////////////////////////////
    for(var i=0; i<data.length; i++){
        var row = data[i];
        var id = row[0];
        var name = row[1];
        var cId = row[2];//原先的functionid，用来控制是否可以在这个文件夹上建立下级目录。现在用来存储type。type也可以控制是否可以建立下级目录，规则待定。
        var entry = row[3];
        var pId = row[4]||0;
        var seq = row[5];//位置。
        var bguri = row[6];
        var menu = {
            id: id, //菜单ID
            name: name, //菜单名称
            pId: pId,//父级菜单
            cId: cId,//原先是绑定的功能Id，现在是type属性。
            entry: entry,
            seq: seq,//顺序号
            bguri: bguri,
            subs: 0//子菜单计数
        };
        if(!!cId){
            menu.dropInner = false;
        }
        menus.push(menu);
    }
    for(var i=0; i<menus.length; i++){
        for(var j=0; j<menus.length; j++){
            if(menus[i].id==menus[j].pId){
                menus[i].subs++;
                menus[j].parent = menus[i].name;
                menus[j].parentElement = menus[i];
            }
        }
    }
    var tree = $.fn.zTree.init($("#treeDemo"), setting, menus);
    var nodes = tree.getNodes();
    var len = nodes.length;
    if(len>0){
        var lastSub = nodes[len-1];
        nextSequence = Math.ceil(+lastSub.seq)+1;
    }else{
        nextSequence = 0;
    }
    
});//end of $(function(){...})

var parentNodeId = 0;//新建节点时应该赋予的父节点id
var parentNodeName = "";//新建节点时应该显示的父节点信息
var currentNodeId = 0;
var nextSequence = -1;
function onMenuItemClick(event, treeId, treeNode){
    //alert("id: "+treeNode.id+", pId: "+treeNode.pId+", seq: "+treeNode.seq);
    currentNodeId = treeNode.id;
    
    //这个地方计算的nextSequence肯定是有误的，应当看从哪里进行新建操作，然后确定nextSequence
    //nextSequence = treeNode.children==null?0:treeNode.children.length;
    if(treeNode.subs>0||treeNode.cId==0){//当前节点是目录或者可作为目录，则在当前节点下建立子菜单
        parentNodeId = treeNode.id||0;//下级栏目建立的时候，父级节点的id
        parentNodeName = treeNode.name||"";//下级目录建立的时候，父级节点的名称
        //这个地方用length应该是很不恰当的，应该看最后一个节点的sequence是多少，然后再加1
        //nextSequence = treeNode.children==null?0:treeNode.children.length;
        if(treeNode.children==null||treeNode.children.length==0){
            nextSequence = 0;
        }else{
            var lastSub = treeNode.children[treeNode.children.length-1];
            nextSequence = Math.ceil(+lastSub.seq)+1;
        }
    }else//不能建立下级节点，则可以建立同级节点，或者顶级节点了。判断一下即可。
    if(treeNode.parentElement!=null){//当前节点是叶子节点，则在当前节点的父节点下建立子节点
        parentNodeId = treeNode.parentElement.id||0;//这是当前节点的父节点id，新建的话应该以该节点为父
        parentNodeName = treeNode.parentElement.name||"";//这是当前节点的父节点名称，新建的话会用来显示
        var parentNode = treeNode.getParentNode();//这是当前节点的父节点，不一定存在，有可能当前节点就是一级节点，没有父级节点
        if(!!parentNode){//如果父级节点的存在，则取父级节点的最后一个节点来计算下一个节点的sequence值
            var lastSub = parentNode.children[parentNode.children.length-1];
            nextSequence = Math.ceil(+lastSub.seq)+1;
        }else{//如果父级节点不存在，则取一级节点的最大sequence值+1作为下一个节点的sequence值
            var tree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = tree.getNodes();
            var len = nodes.length;
            var lastSub = nodes[len-1];
            nextSequence = Math.ceil(+lastSub.seq)+1;
        }
    }else{//这是一个顶级的功能菜单。应该建立一个顶级的最新一个菜单。
        parentNodeId = 0;
        parentNodeName = "";
        var tree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = tree.getNodes();
        var len = nodes.length;
        if(len>0){
            var lastSub = nodes[len-1];
            nextSequence = Math.ceil(+lastSub.seq)+1;
        }else{
            nextSequence = 0;
        }
    }
    
    showEditMode(true, treeNode);//切换右侧标题栏
    //其实这个时候才应该展示右边的页面。刚才这些预先的处理不一定还用得上。
    //alert("nextSequence: "+nextSequence);
    //获取当前节点信息，将其放置在右侧编辑框中
    //$.post("${base}/menus/"+treeNode.id, {}, function(menu){
    //  menu.parent = treeNode.parent;
    //  initForm(menu, treeNode.subs);
    //});
}
var initedModuleId = 0;
var selectF;

var draggingNode = null;
var draggingParent = null;
var draggingPrev = null;
var draggingNext = null;

function undoDragNode(){
    var tree = $.fn.zTree.getZTreeObj("treeDemo");
    var type = null;
    var target = null;
    if(draggingPrev){
        type = "next";
        target = draggingPrev;
    }else
    if(draggingNext){
        type = "prev";
        target = draggingNext;
    }else
    if(draggingParent){
        type = "inner";
        target = draggingParent;
    }
    tree.moveNode(target, draggingNode, type, true);
    resetDrag();
}
function refreshMenuTree(id){
    var tree = $.fn.zTree.getZTreeObj("treeDemo");//$("#treeDemo"));
    var menuId = +$("#input_id").val();//新建时menuId为0，编辑时为非0
    id=+id||0;
    var name = $("#input_menu_name").val();
    name += "["+id+"]";
    var mcid = selectF.val();
    if(+mcid>0){
        var text = selectF.find("option:selected").text();
        var result = text.match(/\[.*?\]/);
        name += result[0];
    }
    if(menuId==0){//新建模式，添加一个节点
        var menu = {id: id, name: name, seq:nextSequence};
        var parent = parentNodeId==0?null:tree.getNodeByParam("id", parentNodeId);
        if(parent!=null){
            parent.subs++;
            menu.parent = parent.name;
        }
        menu.dropInner = !(+mcid>0);
        menu.parentElement = parent;
        menu.cId = +mcid;
        menu.subs = 0;
        tree.addNodes(parent, menu);
        //TODO: 应该在这里重置下一个新建节点的sequence，因为当前仍然在新建模式之下。
        nextSequence++;
        $("#input_sequence").val(nextSequence);
        
    }else{//编辑模式，修改节点
        var nodes = tree.getSelectedNodes();
        for(var i=0, len=nodes.length; i<len; i++) {//不要担心，只会循环一次，因为同时只会一个节点被选中
            var node = nodes[i];
            node.name = name;
            node.dropInner = !(+mcid>0);
            node.cId = +mcid;
            tree.updateNode(node);
        }
    }
}
var mode = 0;//0 数据维护模式；1 栏目管理模式
var curNode;
function showEditMode(editFlag, node){
    curNode = node;
    showMainIframe();
}
function showMainIframe(){
    if(!curNode){
        return;
    }
    currentCh = curNode.entry;
    currentBgUri = curNode.bguri;
    var ifrm = document.getElementById('ifr_main');
    //type很重要，将决定右边显示什么东西。不同的type，在不同的mode下展示不同的东西。
    //1. type=0 容器类型，前后台都是标准ccms结构
    //2. type=1 标准栏目类型，前后台都是标准ccms结构
    //3. type=2 单页栏目类型，前后台都是标准ccms结构
    //4. type=3 半异构标准栏目类型，前台是标准ccms结构，后台不是
    //5. type=4 半异构单页栏目类型，前台是标准ccms结构，后台不是
    //6. type=5 纯异构栏目类型，前台、后台都不是标准ccms结构。注意，地址可能以http开头，可能以/开头，不会是别的。
    //特别对于type=5的纯异构栏目类型，其实有三个地址：cms前台页面地址；后台维护栏目结构地址；后台维护数据地址。
    //其中，后台维护栏目结构的地址通常都是/base/a/site/channels/{{channelStr}}/index.html
    //但由于channel中只有path，后来又加了一个bgurl，因此会带来维度上的缺乏，就是前台仍然要用path，也就是上面的channelStr变量；
    //后台数据维护要是用bgurl，那么问题来了，维护栏目结构用哪个？
    //一个可行的建议是用栏目id，也就是说，使用另外一种常规的URL来访问栏目结构，可以限制只对type=5的栏目有效
    //比如说：/base/site/channels/outer-chId/index.html
    var type = curNode.cId;
    if (!mode) {//数据维护模式，
        if(!currentBgUri){
            ifrm.src="${base}/a/${_site_}/articles/"+currentCh+"/index.html";
        }else if(/^http/.test(currentBgUri)){
            ifrm.src = currentBgUri;
        }else{
            if(/^\//.test(currentBgUri)){
              currentBgUri = currentBgUri.substr(1);  
            }
            ifrm.src="${base}/"+currentBgUri;
        }
    } else {//栏目管理模式
    	if(type-5==0){
    		ifrm.src="${base}/a/${_site_}/channels/outer-"+curNode.id+"/index.html";
    	}else{
        	ifrm.src="${base}/a/${_site_}/channels/"+currentCh+"/index.html";
        }
    }
}
function dropConfirm(treeNodes, targetNode, moveType){
    var node = treeNodes[0];
    var name = node.name;
    var target = targetNode.name;
    var content = ["你确认要将栏目","【"+ name + "】", "移动至","【"+target+"】"];
    if(moveType=="inner"){
        content.push("的下一层级？");
    }else
    if(moveType=="prev"){
        content.push("的前面？");
    }else
    if(moveType=="next"){
        content.push("的后面？");
    }
    art.dialog({
        title: "移动位置确认",
        icon: "question",
        content: content.join(""),
        width: 250,
        height: 150,
        background: '#EEE', // 背景色
        opacity: 0.05,  // 透明度
        lock: true,
        ok: function(){
            var id = node.id;
            var pId = node.pId;
            var prev = node.getPreNode();
            var next = node.getNextNode();
            var sequence = 0;
            if(!!prev){
                if(!!next){
                    sequence = (prev.seq+next.seq)/2;
                }else{
                    sequence = prev.seq + 1;
                }
            }else
            if(!!next){
                sequence = next.seq -1;
            }
            //alert("sequence="+sequence+", pre="+(!!prev?prev.seq:null)+", next="+(!!next?next.seq:null));
            node.seq = sequence;
            $.post("${base}/a/${_site_}/channels/position.do", {id: id, "parentid": pId||0, sequence: sequence}, function(json){
                if(json.success){
                    resetDrag();
                }else{
                    undoDragNode();
                }
            });
        },
        cancel: function(){
            undoDragNode();
        }
    });
}
function resetDrag(){
    draggingNode = null;
    draggingParent = null;
    draggingPrev = null;
    draggingNext = null;
}
function removeItem(){
    var id = currentNodeId;
    art.dialog({
        content: "确定要删除该菜单【id="+id+"】？",
        title: "确认删除",
        icon: "question",
        background: '#EEE', // 背景色
        opacity: 0.05,  // 透明度
        lock: true,
        button: [{
            name: "确定",
            callback: function(){
                if(false)//这里也不删
                $.post("${base}/menus/remove", {id: id}, function(text){
                    var result = text;
                    if(result.success){
                        var tree = $.fn.zTree.getZTreeObj("treeDemo");
                        var currentNode = tree.getNodeByParam("id", id);
                        var parentNode = currentNode.getParentNode();
                        if(!!parentNode){
                            parentNode.subs--;
                        }
                        tree.removeNode(currentNode);
                        //应该清空当前节点的信息展示。并且，由于失去了当前节点，展示区不应该有任何内容==>显示初始的新建菜单。
                        
                        var nodes = tree.getNodes();
                        var len = nodes.length;
                        if(len>0){
                            var lastSub = nodes[len-1];
                            nextSequence = Math.ceil(+lastSub.seq)+1;
                        }else{
                            nextSequence = 0;
                        }
                        initForm({id:0, name: "", desc: "", pid: 0, parent: "", seq: nextSequence, mid: 0, mcid: 0});
                        $("#capNew").show();
                        $("#capEdit").hide();
                    }else{
                        art.dialog({
                            title: "删除失败",
                            icon: "error",
                            content: result.err,
                            width: 400,
                            height: 250,
                            background: '#EEE', // 背景色
                            opacity: 0.05,  // 透明度
                            lock: true,
                            ok: true
                        });
                    }
                });
            }
        }, {
            name: "取消",
            focus: true
        }]
    });
}

function toggleMMode(){
    mode = +!mode;
    $("#a_toggle_mmode").html(!mode?"内容管理模式":"栏目管理模式");
    showMainIframe();
}
//-->
</script>
</head>
<body>
    <header>
        <img src="${base}/ccms/images/backlogo.png">
        <div  style="position: absolute; right: 100px;top:50px">
        <span>欢迎您，${(user.name)!'神秘用户'}！</span>
        <a href="${base}/workspace/dologout" class="pl5 pr10">退出登录</a>
        <a id="a_toggle_mmode" href="javascript:toggleMMode()" class="pl5 pr10">内容管理模式</a>
        <a target="ifr_main" href="${base}/a/${_site_}/profile.html" class="pl5 pr10">主页</a>
        </div>
    </header>
    <div class="side">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="main">
        <iframe id="ifr_main" name="ifr_main" frameborder="0" src="${base}/a/${_site_}/profile.html"></iframe>
    </div>
    <footer class="bottom">技术支持：青岛信通物联网络有限公司</footer>
 </body>
</html>